<template>
    <div>
      <input type="text" v-model="xiangc.name">
      <button @click="addxiangc">创建</button>
      <table align="center">
          <tr v-for="(i, index) in allxiangc" :key="index">
              <td> {{i.name}}</td>
              <td><button @click="del_xc(i.id)">删除</button> --- <button @click="up_xc(index)">修改</button></td>
          </tr>
      </table>
      <input type="text" v-model="update_xc['id']">
      <input type="text" v-model="update_xc['name']">
      <button @click="que">确认修改</button>
      <br><br>
      <el-upload
    class="upload-demo"
    action="#"
    :before-upload="upload"
  
   >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload><br>
  <div>
      名字<input type="text" v-model="zp['name']"><br>
      <select name="" id="" v-model="zp['photo_id']">
          <option :value="i.id" v-for="(i, index) in allxiangc" :key="index">{{i.name}}</option>
      </select><br>
      <button @click="addd">添加</button>
  
      {{zp}}
  </div>
  
  <div>
      <ul>
          <li  v-for="(i, index) in allxiangc" :key="index"><a href="#" @click="zhaop(i.id)">{{i.name}}</a></li>
      </ul>
      <ul  v-for="(i, index) in zhaopian" :key="index">
          <li><a href="#" @click="shan(i.id)">删除</a></li>
          <li><img :src="i.url" alt=""></li>
          
      </ul>
  
      
  
  </div>
    </div>
</template>
  
  <script>
  export default {
      data(){
          return{
              xiangc:{
                  "name":""
              },
              allxiangc:[],
              update_xc:{
                  "id":0,
                  "name":"",
                  "photo_id":0
              },
              zp:{
  
                  "url":'',
                  "name":"",
                  "photo_id":0
              },
              zhaopian:{
                  "id":0,
                  "url":""
              }
          }
      },
      methods:{
          addxiangc(){
              this.axios.post("add_phtot", this.xiangc).then((res) => {
                  alert(res.data.mes)
              }).catch((err) => {
                  
              });
          },
          allxiang(){
              this.axios.get("show_photo").then((res) => {
                  this.allxiangc = res.data.list
              }).catch((err) => {
                  
              });
          },
          del_xc(id){
              this.axios.delete("delete_photo?id="+id).then((res) => {
                  alert(res.data.mes)
                  this.allxiang()
              }).catch((err) => {
                  
              });
          },
          up_xc(id){
              this.update_xc = this.allxiangc[id]
          },
          que(){
              this.axios.put("edit_photo    ", this.update_xc).then((res) => {
                  alert(res.data.mes)
                  this.allxiang()
              }).catch((err) => {
                  
              });
          },
          upload(file){
              var data = new FormData()
              data.append("file", file)
              this.axios.post("upload", data).then((res) => {
                  this.zp.url ="http://localhost:5000/"+ res.data.url
              }).catch((err) => {
                  
              });
              
              
          },
          addd(){
              this.axios.post("add_picture", this.zp).then((res) => {
                  alert(res.data.res)
              }).catch((err) => {
                  
              });
          },
          zhaop(id){
              this.axios.get("show_picture?id="+id).then((res) => {
                  this.zhaopian = res.data.mes
              }).catch((err) => {
                  
              });
          },
          shan(id){
              this.axios.delete("delete_picture?id="+id).then((res) => {
                  alert(res.data.mes)
                  this.allxiang()
              }).catch((err) => {
                  
              });
          }
      },
      mounted(){
          this.allxiang()
          this.zhaop(1)
      }
  
  }
  </script>
  
  <style>
  
  </style>